<template>
  <el-dialog :visible="show" title="服务分类图片" center :before-close="cancel" :destroy-on-close="show">
    <div class="img-container">
      <div
        class="img-list"
        v-loading="loading"
        element-loading-text="数据加载中，请稍后...">
        <div v-for="(item, index) in list">
          <div
            class="img-wrapper"
            :style="{ outline: existImg(item) ? '5px solid #07C160' : '' }"
            v-if="item.type == 1"
            :key="item.bannerId"
          >
            <el-image
              ref="elImage"
              :src="item.url"
              fit="cover"
              :preview-src-list="formatUrl(list)"
            >
            </el-image>
            <div class="menu">
              <div
                @click="hanldeSelectImg(item)"
                :title="existImg(item) ? '移除' : '添加'"
              >
                <i v-if="existImg(item)" class="el-icon-remove-outline"></i>
                <i v-else class="el-icon-circle-plus-outline"></i>
              </div>
              <div @click="handlePreviewImg('elImage', index)" title="预览图片">
                <i class="el-icon-zoom-in"></i>
              </div>
            </div>
            <div v-show="existImg(item)" class="check-wrapper">
              <i class="el-icon-check"></i>
            </div>
          </div>
          <div
            class="video-wrapper"
            :style="{ outline: existImg(item) ? '5px solid #07C160' : '' }"
            v-else="item.type == 2"
          >
            <video
              :ref="'video' + index"
              controls
              width="100%"
              height="100%"
              :src="item.url"
            >
              <h2>我们很抱歉，您的浏览器<strong>不支持video标签</strong></h2>
              <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
            </video>
            <div
              class="operate"
              @click="hanldeSelectImg(item)"
              :title="existImg(item) ? '移除' : '添加'"
            >
              <i v-if="existImg(item)" class="el-icon-remove-outline"></i>
              <i v-else class="el-icon-circle-plus-outline"></i>
            </div>
            <div v-show="existImg(item)" class="check-wrapper">
              <i class="el-icon-check"></i>
            </div>
          </div>
          <div class="text">
            {{ item.content }}
          </div>
        </div>
        <div class="empty" v-show="list.length == 0">
          对不起，没有找到相关数据！
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from 'lodash-es';
import ServerClassifyApi from "../api/server/serverClassify"
export default {
  props: {
    show: {
      type: Boolean,
      value: false
    },
    serverClassifyId:{
        type:Number|String,
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      list: [
       
      ],
      loading: false,
      selectedImgList:[],
    };
  },
  watch: {
    async show(val) {
      if (val) {
        this.selectedImgList = []
        this.loading = true;
        try{
            const res = await ServerClassifyApi.listBanner({serverClassifyId:this.serverClassifyId})
            this.list = res.data
        }finally{
            this.loading=false
        }
        
      }
    }
  },
  methods: {
    // 选择或者清除图片
    hanldeSelectImg(val) {
      let index = this.selectedImgList.findIndex(
        item => item.bannerId == val.bannerId
      );
      let limit = this.limit;
      if (index == -1) {
        if (this.limit == 1) {
          this.selectedImgList = [val];
        } else if (this.selectedImgList.length + 1 <= limit) {
          this.selectedImgList.push(val);
        } else if (this.selectedImgList.length + 1 > limit) {
          this.$message.error("最多只可以选择" + limit + "张图片");
        }
      } else {
        this.selectedImgList.splice(index, 1);
      }
    },
    // 判断图片是否已经选中
    existImg(val) {
      return this.selectedImgList.some(item => item.bannerId == val.bannerId);
    },
    // 把图片的数组对象里面的图片地址全部拿出来
    formatUrl(val) {
      return val.filter(item => item.type == 1).map(item => item.url);
    },
    handlePreviewImg(el, index) {
      let videoNum = 0;
      // 这里需要过滤掉视频
      if (el == "elImage") {
        videoNum = this.list.slice(0, index).filter(item => item.type == 2)
          .length;
      }
      index = index - videoNum;
      this.$refs[el][index].showViewer = true;
      this.$nextTick(() => {
        this.addHideToMask(this.$refs[el][index]);
      });
    },
    // 给每一个预览图片的遮罩层都添加一个点击事件，点击阴影可以取消
    addHideToMask(el) {
      const mask = el.$el.querySelector(".el-image-viewer__mask");
      if (mask) {
        let hide = () => {
          el.showViewer = false;
        };
        // 遮罩层增加点击事件，关闭预览
        mask.addEventListener("click", hide);
        // hook卸载事件，移除之前添加在mask元素的事件
        this.$once("hook:beforeMount", () => {
          mask && mask.removeEventListener("click", hide);
        });
      }
    },
    confirm() {
      this.cancel();
      this.$emit("getUrlList",cloneDeep(this.selectedImgList))
    },
    cancel() {
      this.$emit("update:show", false);
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin img-wrapper {
  .img-wrapper,
  .video-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    display: inline-block;
    // margin: 10px;
    cursor: pointer;

    .el-image {
      width: 100%;
      height: 100%;
    }

    .menu {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: none;
      background-color: rgba(13, 10, 49, 0.7);

      i {
        color: white;
        font-size: 25px;
      }
    }

    .operate {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      display: none;
      background-color: rgba(13, 10, 49, 0.7);
      line-height: 50px;
      text-align: center;

      i {
        color: white;
        font-size: 25px;
      }
    }

    .check-wrapper {
      position: absolute !important;
      bottom: 0;
      right: 0;
      font-size: 30px;
      color: white;
      font-weight: 900;
      border: 20px solid #07c160;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-left: 20px solid transparent;

      .el-icon-check {
        position: relative;
        bottom: 11px;
        right: 7px;
      }
    }

    &:hover .menu {
      display: block;

      & > div {
        line-height: 75px;
        text-align: center;

        &:hover {
          background-color: rgb(13, 10, 49);
        }
      }
    }

    &:hover .operate {
      display: block;
      background-color: rgb(13, 10, 49);
    }
  }
  .text {
    text-align: center;
    padding-top: 10px;
  }
}
.img-container {
  .img-list {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(auto-fill, 150px);
    -ms-grid-columns: repeat(auto-fill, 150px);
    grid-gap: 15px;
    justify-content: space-between;
    align-content: start;
    height: 500px;
    overflow: auto;
    border: 1px solid #f5f5f5;
    padding: 10px;
    @include img-wrapper;

    .empty {
      text-align: center;
      margin: 40px auto;
      color: #909399;
      font-size: 14px;
      grid-column: 1 / -1;
      -ms-grid-column: 1 / -1;
    }
  }
}
</style>
